<template>
  <div class="content">
    <div class="header">服务器IP</div>
    <div class="inner">
      <div class="text">
        <div>{{ props.data?.text }}</div>
        <div>{{ props.data?.text }}</div>
      </div>
      <div class="btn" v-for="(item,index) in props.data?.api" :key="index">{{ item }}</div>
    
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  data: {
    type: Object,
  },
});
console.log("props", props.data?.text);
</script>
<style scoped>
.content {
  width: 220px;
  height: 100%;
}
.header {
  width: 220px;
  height: 30px;
  text-align: center;
}
.inner {
  position: relative;
  width: 220px;
  height: 100%;
  padding: 18px 20px 10px;
  box-sizing: border-box;
  border: 1px solid #000;
  font-size: 12px;
}
.text {
  margin-bottom: 30px;
}

.btn {
  margin: 15px auto;
  width: 100px;
  height: 30px;
  border: 1px solid #38a5ff;
  border-radius: 40px;
  line-height: 30px;
  text-align: center;
}
</style>
